import Vue from 'vue'
import App from './App.vue'
// 直接引入, 目标里无导出, 只需要引入后, 让对应文件里的代码被一起打包后执行即可
import './mobile/flexible.js' // 移动端适配
import './styles/reset.css' // 初始化默认样式
import router from './router' // 导入路由对象
import { Tabbar, TabbarItem, NavBar } from 'vant';

Vue.use(NavBar);
Vue.use(Tabbar);
Vue.use(TabbarItem);

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

// 目标0: 
// 前端无项目先初始化创建, 准备reset.css/其他工具 (v)
// 前端有项目, 先克隆得到半截的项目, 先读当前工程代码, 接着写

// 目标1: 领任务->分析需求
// 首页 / 搜索页面 / 音乐播放页(复制)
// 1. 创建页面组件views下 (每个页面一个文件夹, 里面index.vue默认入口页面文件)
// 2. 复制相应样式-如果没有自己写

// App.vue 只留下 router-view
// Layout.vue (自己建立-认为是布局组件) - 只写头部导航和底部导航-中间留下router-view
// Play.vue - 和Layout.vue并列做一级页面配置和切换
// Home.vue和Search.vue 就是页面上看到的标签内容

// 目标2: 页面组件配置到路由中
// 1. yarn add vue-router 
// 2. ......路由使用7步 (单独的封装成router/index.js模块)
// 3. 引入页面组件到router/index.js中, 配置路由规则->查看页面是否出现
// 注意: @后面有/
// 注意: 规则数组里不能有空对象
// 注意: component没有s, 而且对应引入的页面组件对象, 不是字符串
// 注意: 二级路由path路径字符串没有/
// 注意: new VueRouter里面的key叫routes
// 7步一步都不能落下

// 目标3: 实现底部TabBar导航-实现二级路由切换
// 1. 明确目标, vant组件库, 查找组件文档
// 2. 先引入, 在入口文件中, 全局注册
// 组件使用套路
// (1): 找组件
// (2): 用组件-读组件
// (3): 删组件
// (4): 改组件
// 3. 点击底部导航, 让路由路径切换

// 目标: 网络请求封装
// 1. utils/request.js -> 封装axios
// 2. api/index.js -> 封装接口路径和参数的 方法